<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"
    xmlns:spring="http://www.springframework.org/tags">

<ui:composition template="/templates/main.xhtml">    
    <ui:define name="body">

		<ul class="breadcrumb">
			<li><a href="#" class="breadcrumb-current">1: Select Customer</a></li>
			<li><a href="#">2: Add Products</a></li>
			<li><a href="#">3: Payment</a></li>
			<li><a href="#">4: Print Invoice</a></li>
		</ul>
        
        <h:form>
	        <rich:simpleTogglePanel switchType="client" label="Customer Information">
		        <h:panelGrid columns="2" title="Customer" rowClasses="s1row" columnClasses="gridLabel,gridValue">
			        <h:outputText value="Name: " />
					<h:inputText value="#{searchCriteria.criterias['name'].value}" />
					
					<f:facet name="footer"> 
						<a4j:commandLink styleClass="button-blue" style="padding:6px 20px;" action="search" value="Search" reRender="customerList"/>
					</f:facet>
				</h:panelGrid>
	   		</rich:simpleTogglePanel>
        </h:form>
        
        <h:form>
			<rich:dataTable id="customerList" cellpadding="0" cellspacing="0" border="0"
				var="list" value="#{customers}" style="text-align:center;"
				rows="5" width="100%">
				<f:facet name="header">
					<rich:columnGroup>
						<rich:column colspan="7">
							<h:outputText value="Client(s) found(s)" />
						</rich:column>
						<rich:column breakBefore="true">
							<h:outputText value="Id" />
						</rich:column>
						<rich:column>
							<h:outputText value="Name" />
						</rich:column>
						<rich:column>
							<h:outputText value="Adress" />
						</rich:column>
						<rich:column>
							<h:outputText value="City" />
						</rich:column>
						<rich:column>
							<h:outputText value="Phone" />
						</rich:column>
						<rich:column>
							<h:outputText value="TaxId" />
						</rich:column>
						<rich:column>
							<h:outputText value="Action" />
						</rich:column>
					</rich:columnGroup>
				</f:facet>
				<rich:column sortBy="#{list.customerId}" >
					<h:outputText value="#{list.customerId}" />
				</rich:column>
				<rich:column sortBy="#{list.name}">
					<h:outputText value="#{list.name}" />
				</rich:column>
				<rich:column filterEvent="onkeyup" filterBy="#{list.adresse}">
					<h:outputText value="#{list.adresse}" />
				</rich:column>
				<rich:column filterEvent="onkeyup" filterBy="#{list.city}">
					<h:outputText value="#{list.city}" />
				</rich:column>
				<rich:column>
					<h:outputText value="#{list.phone}" />
				</rich:column>
				<rich:column>
					<h:outputText value="#{list.taxId}" />
				</rich:column>
				<rich:column>
					<h:commandLink styleClass="button-blue" style="padding:6px 20px;" value="Select" action="select" />
				</rich:column>
			</rich:dataTable>
		</h:form>
    </ui:define>
</ui:composition>    
    
</html>